<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/avalon.js"></script>
    <link href="css/bootstrap.min.css"rel="stylesheet">
    <!--<script src="js/jquery-1.11.1.min.js"></script>-->
   <script src="js/admin.js"></script>
<style>
    .quanju {
        width: 80%;
        border: 1px solid red;
    }
    .quanJu{
        width: 80%;
        height: 500px;
        border: 1px solid green;
        margin-top: 5%;
        margin-left: 10%;
        border-radius:10px;
        background-image: url(img/kong.jpg);
    }
</style>
</head>
<body >
<div class="quanJu"ms-controller="test" >
    <div class="container" >
        <div class="row">
            <div class="col-md-2">
                <span style="font-size: 16px;"> 请写入你的计划：</span>
            </div>
            <div class="col-md-6" style="margin-right: 10px" ms-controller="test" >
                <form ms-on-submit="add" ms-on-submit="set()">
                    <div class="form-group">
                        <input type="txt "ms-duplex="text"  class="form-control" placeholder="输入你的计划并且按回车键完成添加">
                    </div>
                </form>
            </div>
        </div>
    </div>
    <hr>
    <div ms-controller="test" style="padding-left: 10%" >
     <button ms-click="toggle(1)">正在进行中</button>
     <button ms-click="toggle(2)">已经完成</button>
      <div class="quanju" ms-rpeat="todoList">
        <div  ms-if-loop="currentIndex ===1">
        <h5 ms-if="todoList.size()>=0" style="color: green">现在进行{{todoList.size()}}项计划</h5>
        <div  ms-repeat="todoList" ms-if-loop="can" ms-on-submit="set()" >
            <div ms-click="checkMission($index,true)" style="border-radius: 50%;background-color: green;width:20px;height:20px;float: left">
            </div>
                <span id="1" ondblclick="edit(this)" style="font-size:20px;margin-left: 5px; "  >{{el}}</span>
            <div style="float: right">
                <a href="javaScript:void(0);" class="todoDelete"ms-click="$remove"  >删除计划</a>
            </div>
        </div>
    </div>
        <div  ms-if-loop="currentIndex ===2">
          <h5 ms-if="doneList.size()>=0" style="color:red">已经完成{{doneList.size()}}项计划</h5>
          <div  ms-repeat="doneList"  ms-if-loop="can"  ms-on-submit="set()">
            <div ms-click="checkMission($index)" style="border-radius: 50%;background-color: red;width:20px;height:20px;float: left">
            </div>
            <span ondblclick="edit(this)" style="font-size: 20px;margin-left: 5px;" >{{el}}</span>
            <div style="float: right">
            <a href="javaScript:void(0);" class="todoDelete" ms-click="$remove">删除计划</a>
            </div>
          </div>
      </div>
      </div>
    </div>
</div>
</body>
</html>